<template>
  <div>
    <!-- 轮播图 -->

    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>

    <!-- 搜索 -->
    <van-search v-model="value" placeholder="请输入搜索关键词" />
    <!-- 下拉 -->

    <div class="dropdown" @click="getValues">
      {{cityName}}
      <i><van-icon name="arrow-down" /></i>
    </div>
    <!-- <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
    </van-dropdown-menu> -->
    <!-- 定位图标 -->
    <van-icon name="location-o" />

    <van-grid>
      <van-grid-item class="grid-item" icon="wap-home-o" text="整租" />
      <van-grid-item icon="friends-o" text="合租" />
      <van-grid-item icon="location-o" text="地图找房" />
      <van-grid-item icon="home-o" text="去出租" />
    </van-grid>

    <!-- 租房小组 -->
    <div class="RentalUnit">
      <!-- 标题 -->
      <div class="RentalUnit-title">
        <h3>租房小组</h3>
        <p><a href="">更多</a></p>
      </div>
      <!-- 图片区 -->

      <!-- <van-grid :column-num="2" direction="horizontal" :gutter="10">

        <van-grid-item v-for="value in groups" :key="value.id" />
        <img :src="`http://liufusong.top:8080${value.imgSrc}`" alt="" />
        <span>{{ value.title }}<br />{{ value.desc }}</span>
      </van-grid> -->
 <van-grid :column-num="2" :gutter="10" direction="horizontal">
        <van-grid-item
          :text="item.title"
          class="listcontent"
          v-for="item in groups"
          :key="item.id"
        >
          <van-image
            :src="'http://liufusong.top:8080' + item.imgSrc"
            class="van-img-my"
          />
          <div class="van-text-my">
            <p>{{ item.title }}</p>
            <p>{{ item.desc }}</p>
          </div>
        </van-grid-item>
      </van-grid>

    </div>
  </div>
</template>

<script>
// import request from '@/utils/requset'
import { getCity } from '@/utils/storage'
import { getDetail } from '@/api/user'
import { getGroups } from '@/api/index'
export default {
  name:'index',
  components: {},
  props: {},
  data() {
    return {
      value: '',
      value1: 0,

      id: '',
      images: [],
      groups: [],
      cityName:'上海'
    }
  },

  async created() {
    //轮播图
    this.id = this.$route.params.id
    const { body: img } = await getDetail(this.id)
    const img1 = img.map((item) => 'http://liufusong.top:8080' + item.imgSrc)
    this.images = img1

    //租房小组列表
    const { body } = await getGroups()
    // console.log(body);
    this.groups = body
    // console.log(this.groups)

     const  {label}  = getCity()
  //  this.cityName=res.label
  console.log(label);
  this.cityName=label
  },
  //

  methods: {
    getValues() {
     this. $router.push('/citylist')
   const  {label}  = getCity()
  //  this.cityName=res.label
  console.log(label);
  this.cityName=label

    },
  },
}
</script>

<style scoped lang="less">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.van-search {
  position: absolute;
  top: 10px;
  left: 22%;
  right: 0;
  width: 65%;
  height: 48px;
}
/* 下拉 */

.dropdown {
  position: absolute;
  top: 10px;
  left: 12px;
  width: 50px;
  height: 48px;
  line-height: 48px;
  background-color: #fff;
}

// 定位图标
.van-icon {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 30px;
  color: #fff;
  height: 50px;
  line-height: 50px;
}
/* <!-- 租房小组  STAR--> */
.RentalUnit {
  position: relative;
  width: 100%;
  height: 220px;
  background-color: #f6f5f6;
  .RentalUnit-title {
    padding: 5px 12px;
    display: flex;
    // align-items: center;
    justify-content: space-between;
    // padding: 0 10px;
    // border-bottom: 1px solid #e9e9e9;
  }
  .van-grid {
    img {
      height: 50px;
      margin-right: 10px;
    }
  }

  // .RentalUnit-pic {
  //   display: flex;
  //   flex-wrap: wrap;
  //   .RentalUnit-pic-item {
  //     margin-top: 10px;
  //     margin-left: 12px;
  //     width: 45%;
  //     height: 60px;
  //     border-radius: 5px;
  //     background-color: #087;
  //   }
  // }
}
/* <!-- 租房小组  END--> */
img {
  width: 100%;
  height: 212px;
  vertical-align: top;
}
.RentLabel {
  display: flex;
}
.item {
  width: 25%;
  height: 120px;
  background-color: #ccc;
}

.van-grid {
  height: 120px;
  font-size: 20px;
}
.icon {
  font-size: 20px;
  margin-bottom: 10px;
}
.text {
  font-size: 20px;
}
.van-grid-item {
  font-size: 20px;
}
.grid-item {
  font-size: 20px;
}
.van-img-my{
   width: 30px;
}
 .van-text-my {
    font-size: 14px;
    margin-left: 10px;
    p {
      margin: 0;
    }
  }
</style>
